<template>
	<view>
		<view class="header">
			<view class="bg">
				<view class="box">
					<view class="box-hd">
						<view class="avator">
							<img mode="aspectFit" :src="'http://localhost:4567/messy_json/img?path='+userInfo.avatar"></img>
						</view>
						<view class="phone-number">Hi！{{userInfo.name}} 你是第{{userInfo.id}}位注册用户</view>
					</view>
					<view class="box-bd">
						<view class="item">
							<view class="icon"><img src="../../../static/user/card.png"></view>
							<view class="text">用户: {{userInfo.realName}}</view>
						</view>
						<view class="item">
							<view class="icon"><img src="../../../static/user/jf.png"></view>
							<view class="text">积分: {{userInfo.scope}}</view>
						</view>
						<view class="item">
							<view class="icon"><img src="../../../static/user/7.png"></view>
							<view class="text">专业: {{userInfo.college}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list-content">
			<view class="list">
				<view class="li noborder" @click="updatePassword">
					<view class="icon"><image src="../../../static/user/opinion.png"></image></view>
					<view class="text">修改密码</view>
					<image class="to" src="../../../static/user/to.png"></image>
				</view>
				<view class="li " @click="updateName">
					<view class="icon"><image src="../../../static/user/opinion.png"></image></view>
					<view class="text">修改昵称</view>
					<image class="to" src="../../../static/user/to.png"></image>
				</view>
				<view class="li ">
					<view class="txt">详情请关注“渔舟傍晚”微信公众号</view>
				</view>
				<view style="width:100%;">
				    <official-account></official-account>
				</view>
			</view>
		</view>
		<view class="footer">
			<button type="default" style="margin-top: 50%;" size="default" @click="exit">退出登录</button>
			2019-2025 V1.0.0,author: BeijiRonin,date:2021/01/21,WECHAT:BeijiRonin
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: "",
			};
		},
		onLoad() {
			this.getUserInfo();
		},
		onPullDownRefresh() {
			this.getUserInfo();
		},
		methods: {
			updatePassword(){
				uni.navigateTo({
						url: '/pages/updatePassword/updatePassword'
				});
			},
			updateName(){
				uni.navigateTo({
						url: '/pages/updateName/updateName'
				});
			},
			exit() {
				uni.getStorage({
					key: 'token',
					success: function(storage) {
						uni.request({
							url: "http://localhost:4567/user_json/exit.opera",
							header: {
								"token": storage.data.tokenName,
							},
							method: "POST",
							success: (res) => {
								uni.removeStorage({
									key: 'token',
									success: function(res) {
										uni.navigateTo({
											url: '/pages/login/login'
										});
									}
								});
							},
							fail: (res) => {
								uni.removeStorage({
									key: 'token',
									success: function(res) {
										uni.navigateTo({
											url: '/pages/login/login'
										});
									}
								});
							}
						});
					},
					fail: function(res) {
						this.onPullDownRefresh()
					}
				});
			},
			getUserInfo() {
				var _self = this;
				uni.getStorage({
					key: 'token',
					success: function(storage) {
						uni.request({
							url: "http://localhost:4567/user_json/getUser.json",
							header: {
								"token": storage.data.tokenName,
							},
							method: "POST",
							success: (res) => {
								console.log(res);
								if (res.statusCode != 200) {
									uni.navigateTo({
										url: '/pages/login/login'
									});
								} else {
									_self.userInfo = res.data
								}
							},
							fail: (res) => {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						});
					},
					fail: function(res) {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color:#f1f1f1;
	font-size: 30upx;
}

.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		color: #C0C4CC;
		font-size: 15rpx;
	}
.header{
	background: #fff;
	height: 290upx;
	padding-bottom: 110upx;
	.bg{
		width: 100%;
		height:200upx;
		padding-top:100upx;
		background-color:#4191ea;
	}
}
.box{
	width: 650upx;
	height: 280upx;
	border-radius: 20upx;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 5upx 20upx 0upx rgba(0, 0, 150, .2); 
	.box-hd{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		.avator{
			width: 160upx;
			height: 160upx;
			background: #fff;
			border: 5upx solid #fff;
			border-radius: 50%;
			margin-top: -80upx;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.phone-number{
			width: 100%;
			text-align: center;
		}
	}
	.box-bd{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: center;
		.item{
			flex: 1 1 auto;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;
			border-right: 1px solid #f1f1f1;
			margin: 15upx 0;
			&:last-child{
				border: none;
			}
			.icon{
				width: 60upx;
				height: 60upx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.text{
				width: 100%;
				text-align: center;
				margin-top: 10upx;
			}
		}
	}
}
.list-content{
	background: #fff;
}
.list{
	width:100%;
	border-bottom:15upx solid  #f1f1f1;
	background: #fff;
	&:last-child{
		border: none;
	}
	.li{
		width:92%;
		height:100upx;
		padding:0 4%;
		border-bottom:1px solid rgb(243,243,243);
		display:flex;
		align-items:center;
	&.noborder{
		border-bottom:0
		}
		.icon{
			flex-shrink:0;
			width:50upx;
			height:50upx;
			image{
				width:50upx;
				height:50upx;
			}
		}
		.text{
			padding-left:20upx;
			width:100%;
			color:#666;
		}
		.txt{
			width: 100%;
			text-align: center;
			color:#666;
		}
		.to{
			flex-shrink:0;
			width:40upx;
			height:40upx;
		}
	}
}
</style>
